<template>
    <div>
        <m-filter placeholder="关键字搜索" searchKey="search" @search="searchTable">
            <template slot="search-form">
                <a-button v-has="'add'" class="ml20" icon="plus" type="primary" @click="openOperateModal()"></a-button>
            </template>
        </m-filter>
        <div class="table">
            <a-table
                rowKey="id"
                :columns="columns"
                :loading="tableLoading"
                :data-source="tableData"
                :scroll="{ y: true }"
                :pagination="pagination"
                @change="handleTableChange"
            >
                <template slot="name" slot-scope="name, record">
                    <a @click="openDetailModal(record)">{{ name }}</a>
                </template>
                <template slot="releaseDateTime" slot-scope="releaseDateTime">
                    <span>{{ $moment(releaseDateTime).format('YYYY-MM-DD HH:ss') }}</span>
                </template>
                <template slot="operate" slot-scope="text, record">
                    <span v-has="'edit'" class="primary-color" @click="openOperateModal(record)"></span>
                    <a-divider type="vertical" v-has="'edit:line'" />
                    <a-popconfirm
                        v-has="'del'"
                        title="确定删除吗?"
                        ok-text="是"
                        cancel-text="否"
                        @confirm="del(record.id)"
                    >
                        <span class="danger-color"></span>
                    </a-popconfirm>
                </template>
            </a-table>
        </div>
        <operateModal
            v-if="isOpenOperateModal"
            :isShowModal.sync="isOpenOperateModal"
            :currRow="currRow"
            :enterpriseId="currSelectedTreeId"
            @updateData="getTableData"
        />
        <detailModal
            v-if="isOpenDetailModal"
            :isShowModal.sync="isOpenDetailModal"
            :currRow="currRow"
            :enterpriseId="currSelectedTreeId"
            @updateData="getTableData"
        />
    </div>
</template>

<script>
import { PAGINATION } from '../../common/config'
import operateModal from './modal/index'
import detailModal from './modal/detail'
import { policyRestApi } from '../../common/api/setting'
import MFilter from '../../components/filter'
import { getFinalPageNum } from '@/utils/methods'

export default {
    name: 'qa',
    components: {
        MFilter,
        operateModal,
        detailModal,
    },
    data() {
        return {
            // table
            columns: [
                {
                    title: '文件名称',
                    dataIndex: 'name',
                    key: 'name',
                    scopedSlots: { customRender: 'name' },
                },
                {
                    title: '文件类型',
                    dataIndex: 'type',
                },
                {
                    title: '发布单位',
                    dataIndex: 'releaseUnit',
                },
                {
                    title: '发布时间',
                    dataIndex: 'releaseDateTime',
                    key: 'releaseDateTime',
                    scopedSlots: { customRender: 'releaseDateTime' },
                },
                {
                    title: '操作',
                    dataIndex: 'operate',
                    scopedSlots: { customRender: 'operate' },
                    width: 250,
                },
            ],
            tableData: [],
            tableLoading: false,
            currRow: undefined,
            // modal
            isOpenDetailModal: false,
            isOpenOperateModal: false,
            //enterprise tree
            currSelectedTreeId: '',
            pagination: PAGINATION(),

            searchParams: { search: '' },
        }
    },
    computed: {},
    mounted() {
        this.getTableData()
    },
    methods: {
        async del(id) {
            const res = await policyRestApi.del({ id })
            res.code == 200 ? this.$message.success(`删除政策法规成功`) : this.$message.error(`删除政策法规失败`)
            this.pagination.current = getFinalPageNum(
                this.pagination.total,
                this.pagination.current,
                this.pagination.pageSize,
                1,
            )
            this.getTableData()
        },
        handleTableChange(pagination) {
            this.pagination.current = pagination.current
            this.pagination.pageSize = pagination.pageSize
            this.getTableData()
        },
        openDetailModal(row) {
            this.currRow = row
            this.isOpenDetailModal = true
        },
        openOperateModal(row) {
            this.currRow = row
            this.isOpenOperateModal = true
        },
        async getTableData() {
            const { current: pageNum, pageSize } = this.pagination
            this.tableLoading = true
            let res
            try {
                res = await policyRestApi.get({ ...this.searchParams, pageSize, pageNum })
                if (res.code == 200) {
                    this.tableData = res.data.list
                    this.pagination.total = res.data.rowCount
                }
            } catch (e) {
                console.log(e)
            }
            this.tableLoading = false
        },
        searchTable: _.debounce(function (params) {
            this.searchParams = params
            this.pagination.current = 1
            this.getTableData()
        }, 400),
        onCreateBtnClick() {},
    },
}
</script>

<style lang="scss" scoped>
.ant-tree {
    height: 560px;
    overflow-y: auto;
    margin-bottom: 20px;
}
</style>
